import React, { Component } from "react";
import { TabBar } from "antd-mobile";
// import { UserOutlined } from "@ant-design/icons";
import "./fonts/iconfont.css";

import { withRouter } from "react-router-dom";

import style from "./style.less";
const tabItems = [
  {
    title: "首页",
    icon: "icon-ind",
    path: "/Ipadkanban",
  },
  {
    title: "地图",
    icon: "icon-map",
    path: "/Ipadmap",
  },
  {
    title: "客户管理",
    icon: "icon-my",
    path: "/IpadcustomerManagement",
  },
];
class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: this.props.location.pathname,
      hidden: false,
      fullScreen: false,
    };
  }
  componentDidUpdate(prevProps) {
    // prevProps 上一次的props，此处也就是上一次的路由信息
    // this.props 当前最新的props，此处也就是最新的路由信息
    // 注意：在该钩子函数中更新状态时，一定要在 条件判断 中进行，否则会造成递归更新的问题
    if (prevProps.location.pathname !== this.props.location.pathname) {
      // 此时，就说明路由发生切换了
      this.setState({
        selectedTab: this.props.location.pathname,
      });
    }
  }
  // 渲染 TabBar.Item
  renderTabBarItem() {
    return tabItems.map((item) => (
      <TabBar.Item
        title={item.title}
        key={item.title}
        icon={<i className={`iconfont ${item.icon}`} />}
        selectedIcon={<i className={`iconfont ${item.icon}`} />}
        selected={this.state.selectedTab === item.path}
        onPress={() =>
          // this.props.history.push({
          //   pathname: item.pathname,
          //   query: { flag: true },
          // })
          {
            this.setState({
              selectedTab: item.path,
            });
            this.props.history.push(item.path);
          }
        }
      />
    ));
  }

  render() {
    return (
      <div
        className={style.taber_style}
        // style={{
        //   fontcolor:'#000000',
        //   fontsize:19
        // }}
      >
        <TabBar
          tintColor="	#191970"
          noRenderContent={false}
          barTintColor="white"
        >
          {this.renderTabBarItem()}
        </TabBar>
      </div>
    );
  }
}
export default withRouter(index);
